 <template>
    <div v-if="show" class="alert-container" @touchmove="noscroll">
        <section class="tip-text-container">
            <div class="tip-icon">
                <span></span>
                <span></span>
            </div>
            <p class="tip-text" v-html="alertText"></p>
            <div class="btn-box flex-space-between">
                <!-- 增加一个取消按钮 -->
                 <button v-if="closeState" class="m-btn m-btn-close" @click="closeTip">取消</button>
                <button v-if="confirmState" class="m-btn" @click="confirmTip">确认</button>
            </div>
        </section>
    </div>
</template>

<script>
export default {
  data() {
    return {
      positionY: 0,
      timer: null
    };
  },
  mounted() {},
  // props: ['alertText'],
  methods: {
      // 禁止底部滑动
      noscroll(event) {
          event.preventDefault();
      },
    //取消；
    closeTip() {
      this.show = false;
      this.close();
    },
  // 确认；
    confirmTip(){
      this.show = false;
      this.confirm();
    }
  }
};
</script>

<style lang="less" scoped>
@import (reference) url(../assets/less/common);

.alert-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  .tip-text-container {
    width:5.6rem;
    height:auto;
    background-color: #fff;
    border-radius: 0.2rem;
    padding:0.8rem 0.6rem 0.4rem 0.6rem;
    box-sizing: border-box;
    overflow: hidden;
    .tip-text {
      font-size: @fontSize32;
      text-align: center;
      font-family: font-family500;
      font-weight: @fontWeight600;
      color:#333333;
      line-height:0.48rem;
    }
    .btn-box {
      margin-top:0.68rem;
      button{
        flex:1;
        height:0.7rem;
        /*width:1.92rem;*/
        /*height:0.68rem;*/
        border-radius: 0.4rem;
        font-size: @fontSize30;
        font-family: @fontFamily400;
        font-weight: @fontWeight500;
        color:#ffffff;
        background:linear-gradient(270deg,rgba(231,52,98,1) 0%,rgba(245,100,100,1) 100%);
        border:none;
        outline: none;
      }
      .m-btn-close{
        color:#E73462;
        background:#ffffff;
        border:0.02rem solid #E73462;
        margin-right:0.5rem;
      }
    }
  }
}

.btn-sub {
  border-radius: 0;
}
.changeColor {
  color: #333333;
}
</style>
